<template>
  <drag-modal-vue
      :maskClosable="false"
      :width="720"
      v-model="visible"
      :title="!formId ? '新增' : '修改'"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="登录帐号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入登录帐号"
                   :disabled=disabled
                   v-decorator="['username', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"/>
        </a-form-item>


        <a-form-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="昵称"
                   v-decorator="['nickname', {rules: [{required: true, message: '昵称不得为空'}]}]"/>
        </a-form-item>

        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
              placeholder="请输入邮箱"
              v-decorator="['email', {rules: [{required: true, pattern: /[a-zA-Z0-9_]{1,}[@][a-z0-9]{2,3}[.][a-z]{2,3}/, message: '请输入正确邮箱'}]}]"/>
        </a-form-item>

        <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
              placeholder="请输入手机号"
              v-decorator="['mobile', {rules: [{required: true, pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确手机号'}]}]"/>
        </a-form-item>

        <a-form-item label="用户密码" :labelCol="labelCol" :wrapperCol="wrapperCol"
                     extra="后台登录密码"
                     v-if="formId ===0">
          <a-input placeholder="请输入用户密码" type="password"
                   v-decorator="['password', {rules: [{required: true, min: 6, message: '密码长度不得小于6位'} ]}]"/>
        </a-form-item>
        <a-form-item label="用户密码" :labelCol="labelCol" :wrapperCol="wrapperCol"
                     extra="后台登录密码"
                     v-else>
          <a-input placeholder="请输入用户密码" type="password"
                   v-decorator="['password', {rules: [{ min: 6, message: '密码长度不得小于6位'}]}]"/>
        </a-form-item>

        <!--密码设置-->
        <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol"
                     v-if="formId ===0">
          <a-input
              placeholder="请输入用户确认密码"
              type="password"
              v-decorator="['password_confirm', {rules: [{required: true, message: '确认密码不得为空'},{validator: compareToFirstPassword} ]}]"/>
        </a-form-item>
        <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol"
                     v-else>
          <a-input
              placeholder="请输入用户确认密码"
              type="password"
              v-decorator="['password_confirm', {rules: [{ message: '确认密码不得为空'},{validator: compareToFirstPassword}]}]"/>
        </a-form-item>

        <a-form-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
              :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}"
              show-search
              mode="multiple"
              placeholder="请选择角色"
              option-filter-prop="children"
              v-decorator="['roleIdList', {rules: [{required: true, message: '请选择角色'}]}]">
            <a-select-option
                v-for="(item, index) in roleList"
                :key="index"
                :value="item.roleId">{{ item.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group
              v-decorator="['status', {initialValue: 1, rules: [{ required: true }]}]">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>

      </a-form>
    </a-spin>

    <div slot="close">
      <img alt="无图片"
           @click="handleCancel"
           src=""
           class="drag-modal-vue-close">
    </div>
    <div slot="footer">
      <button @click="handleCancel" type="button" class="ant-btn"><span>取 消</span></button>
      <a-button
          :loading="submitButtonLoading"
          @click="handleSubmit"
          type="button"
          class="ant-btn ant-btn-primary"
          style="margin-left: 8px"
      >
        <span>确 定</span>
      </a-button>
    </div>
  </drag-modal-vue>


</template>

<script>
import _ from "lodash";
import {saveAndUpdate, info} from '@/services/system/auth/admin'
import {roleList} from '@/services/system/auth/role'

export default {
  name: "AddOrUpdate",
  data() {
    return {
      //是否禁用
      disabled: false,
      //是否弹窗
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: true,
      //确认按钮的 loading
      submitButtonLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      //角色列表
      roleList: [],
      //id
      formId: null,
      // 当前记录
      record: {},
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
    }
  },
  methods: {
    /**
     *数据初始化
     */
    init(id) {
      //this.confirmLoading = true
      this.visible = true
      this.submitButtonLoading = false
      this.formId = id || 0
      roleList().then(({data}) => {
        this.roleList = data.data
      }).then(() => {
        if (this.formId) {
          this.disabled = true
          info(this.formId).then(({data}) => {
            //设置值
            const data1 = _.pick(data.data, ['username', 'mobile', 'email', 'status', 'roleIdList'])
            const {form: {setFieldsValue}} = this
            this.$nextTick(() => {
              setFieldsValue(data1)
            })
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    /**
     * 确认按钮
     */
    handleSubmit(e) {
      if (this.confirmLoading === true) return
      e.preventDefault()
      const {form: {validateFields}} = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        if (errors === null) {
          this.confirmLoading = true
          this.submitButtonLoading = true
          values.userId = this.formId
          this.onFormSubmit(values)
        }
      })
    },
    /**
     * 提交到后端api
     */
    onFormSubmit(values) {
      saveAndUpdate(values).then((result) => {
        // 显示成功
        this.$message.success(result.data.message, 1.5)
        // 关闭对话框
        this.handleCancel()
        // 通知父端组件提交完成了
        this.$emit('handleSubmit', values)
      }).finally(() => {
        this.confirmLoading = false
        this.submitButtonLoading = false
      })
    },
    /**
     * 关闭对话框事件
     */
    handleCancel() {
      this.confirmLoading = true
      this.visible = false
      this.disabled = false
      this.form.resetFields()
    },
    /**
     * 验证确认密码是否一致
     */
    compareToFirstPassword(rule, value,) {
      const {form} = this
      if (value && value !== form.getFieldValue('password')) {
        return new Error('您输入的确认密码不一致')
      }
      return true
    },
  }
}
</script>

<style scoped>

</style>
